<template>
  <div class="test">

    <h1 style="width:100%;height: 800px;background: red;font-size: 50px;">非异步组件</h1>

    <div ref="test">
      <!-- dom对象 移动到可视区域才显示，Suspense 等待组件请求完成才显示组件 -->
      <Suspense v-if="show">
        <!-- 默认插槽 -->
        <template #default>
          <A />
        </template>
        <!-- 加载中状态 -->
        <template #fallback>
          正在加载...
        </template>
      </Suspense>
    </div>

  </div>
</template>

<script  setup>
import { useTime } from '@/hooks/useTime.js'// 引入自定义hook
import { ref, defineAsyncComponent } from "vue";
import { useIntersectionObserver } from '@vueuse/core';//引入vueuse中的判断方法:该元素是否在视口中

const { year } = useTime();// 使用自定义hook
console.log(useTime(), year.value);

const A = defineAsyncComponent(() => import('./A.vue'));//异步组件

let show = ref(false);
let test = ref(null);

const { stop } = useIntersectionObserver(test, ([{ isIntersecting }]) => {
  // isIntersecting: 判断是否在视口中,返回布尔值
  if (isIntersecting) {
    show.value = true;
    stop();// 在视口中后，停止监听
  }
  console.log("触发状态:", isIntersecting);
});

</script>
